<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <ul>
        <li>电脑</li>
        <li>鼠标</li>
        <li>假发</li>
        <li>生发剂</li>
    </ul>
    <script>
        var list = document.querySelectorAll('li')
        console.log(list)

        //第一种写法
        //原理是循环是给每个list都添加一个index属性，并且给每个index属性都赋值，所以点击时的list[i]是就是每次点击的this.index这个编号
        // for(var i = 0; i < list.length; i++) {
        //     list[i].index = i
        //     list[i].onclick = function () {
        //         alert(this.index)
        //     }
        // }
        

        //第二种写法
        //循环一次就调用一次函数，每次调用的index值都不相同
        //每个事件里都有各自的index
        // list.forEach(function ( li, index) {
        //     li.onclick = function () {
        //         alert(index)
        //     }
        // })

        // list.forEach(function ( li, index) {
        //     li.onclick = function () {
        //         alert(index)
        //     }
        // })

        //第三种写法
        //原理是let声明的变量是块级作用域的变量，每次循环是这个块级作用域的变量都会在不同的块级作用域中 ，这些变量互不影响
       for(let i = 0; i < list.length; i++) {
           list[i].onclick = function () {
               alert(i)
           }
       }
        


    </script>
</body>
</html>